<template>
  <div class="PageTarget" ref="PageTargetPage">
    <div
      class="PageTarget-mask"
      ref="PageTargetMask"
      @touchmove.prevent
      @mousewheel.prevent
    />

    <div
      ref="PageTargetBody"
      class="PageTargetBody"
      style="display: flex; flex-direction: column;z-index: 1;"
    >
      <component :is="vTargetName" :propData="propData"></component>
    </div>
    <!-- <div ref="PlayListPageBody">
      
      <div class="PlayListPage-head">
        <a>顺序播放({{ $store.state.playList.playNowList.length }}首)</a>
      </div>
    </div> -->
  </div>
</template>
<style>
.PageTarget {
  height: 100vh;
  width: 100vw;
  z-index: 10;
  position: fixed;
  /* left: 5vw; */
  left: 0;
  bottom: 0em;

  /* margin-left: -5vw; */
}
.PageTarget-mask {
  /* background: rgba(0, 0, 0, 0.6); */
  transition: all 0.6s;
  z-index: 10;
  height: 100vh;
  position: static;
}
.PageTargetBody {
  background: white;
  height: 100vh;
  width: 100vw;
  position: absolute;
  bottom: -100vh;
  transition: all 0.6s;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
/* .PageTargetBody > div:active {
  background: rgb(219, 221, 223);
} */
</style>
<script>
// import { create } from "@/common/commonUtils";
// import router from '@/router'
import { Toast } from "vant";
import BlackList from "@/components/wl/blackList.vue";
import SearchList from "@/components/wl/searchList.vue";
import syncPlaySetup from "@/components/wl/syncPlay/setup.vue";
// import PlayLyric from '@/components/zx/PlayLyrics.vue'

export default {
  components: { BlackList, SearchList, syncPlaySetup },
  props: {
    targetName: String,
    propData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  data() {
    return {
      searchInput: "",
      ajaxResult: [],
      isload: false,
      vTargetName: "",
    };
  },
  methods: {
    closeWindow() {
      this.$refs.PageTargetMask.style = "background: rgba(0, 0, 0, 0);";
      // this.$refs.PlayListPageBody.style = "";
      this.$refs.PageTargetBody.style = "bottom:-50em";
      setTimeout(() => {
        this.$refs.PageTargetPage.style = "display:none";
        this.$destroy();
        console.log("已经销毁div窗口啦");
      }, 500);
    },
    openWindow() {
      this.$refs.PageTargetMask.style = "background: rgba(0, 0, 0, 0.6);";
      console.log("正在打开窗口");
      this.$refs.PageTargetPage.style = "bottom:-0em";
      this.$refs.PageTargetBody.style = "bottom:0em";
    },
    checkRouter() {
      let lists=this.$router.options.routes;
      for (let index = 0; index < lists.length; index++) {
        const element = lists[index];
        if(element.name==this.targetName){
          return element.component;
        }
      }
      return null;
    },
  },
  mounted() {
    this.vTargetName = this.targetName;
    if (this.isload) {
      return;
    }
    this.isload = true;
    let that = this;

    let match = this.$options.components[this.targetName];
    // console.log(this.$options.components,"已注册")

    if (match == null) {
      let com = this.checkRouter();
      if (com == null) {
        console.log("加载窗口失败!");
        Toast("窗口组件不存在!");

        this.$destroy();
        return;
      }
      this.$options.components[this.vTargetName]=com;
    }
    setTimeout(function () {
      that.openWindow();
    }, 100);
  },
};
</script>